<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <div id="test"></div>
    <script type="text/babel">
        /*
            React.createElement(type,props,children)
                用来创建React元素 虚拟DOM
                React元素无法修改
            ReactDOM.createRoot()
                创建一个根节点
            .render()
                渲染React元素到根节点
                当首次调用时，容器节点里的所有DOM元素都会被替换，后续的调用则会使用React的DOM差分算法(DOM Diffing algorithm)进行局部更新
        */
        function Hello(){
            return <h1>Hello React</h1>
        }
        const XX = React.createElement('button',{
            className:'xx',
            id:'idxx',
            onClick:()=>alert('点击了一下')
        } ,'点击')
        const div = React.createElement('div',{
            className:'divclassName',
            id:'divid',
        } ,'div---',XX)
        ReactDOM.createRoot(document.getElementById('test')).render(div)
    </script>
</body>
</html>